<template>
	<view class="content flex" :style="status">
		<view class="status"></view>
		<view class="card-box flex-1" id="card-box">
			<view class="card-outer" v-for="e, i in list" :key="i" :class="[`card-outer-${e.list}`, ...e.class || []]" :style="{
					'--rotate': `${e.deg}deg`,
					opacity: e.opacity,
					...e.style || {}
				}" @click="Select(i)">
				<image class="card" :class="[...e.cardClass || '']" src="/static/tarot-bg-2.png" mode="scaleToFill">
				</image>
			</view>
		</view>
		<view class="result-box flex flex-col">
			<view class="flex flex-col result-label-box justify-center">
				<view class="result-label">
					{{
						info.cardtype ?
							(info.cardtype.cardtype ? info.cardtype.cardtype.name : '')
							:
							''
					}}
				</view>
				<view class="result-label">{{info.cardtype ? info.cardtype.name : '' }}</view>
				<view class="result-label">{{info.name || '' }}</view>
			</view>
			<view class="select-count flex items-center">
				请您再选择
				<text>{{info.num - select.length}}</text>
				张牌
			</view>
			<view class="select-box flex justify-between">
				<image class="card select-card" v-for="e, i in select" :key="i" :src="e.image || ''"
					:class="[...e.cardClass || []]" mode="scaleToFill"></image>
			</view>
			<view class="flex justify-between" style="padding: 0 20rpx;">
				<text @click="InitCard()" class="custom-button">重选</text>
				<text @click="Confirm()" class="custom-button">确定</text>
			</view>
		</view>
		<text class="custom-toast" v-if="toast">{{toast}}</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import config from '@/config/index.js'
	import {
		onLoad,
		onHide
	} from '@dcloudio/uni-app'

	const status = ref({
		'--status': '0px'
	})
	const list1 = ref([])
	const list2 = ref([])
	const list = ref([])
	const select = ref([])
	const toast = ref('')
	let options = {}
	let info = ref({
		num: 0
	})
	onLoad(_options => {
		// plus.screen.lockOrientation('landscape-primary');
		// plus.screen.lockOrientation('portrait-primary');
		console.log(uni.getSystemInfoSync().statusBarHeight)
		options = _options
		status.value['--status'] = uni.getSystemInfoSync().statusBarHeight + 'px'
		InitCard()
		GetCards()
	})

	function InitCard() {
		list.value = []
		list1.value = []
		list2.value = []
		select.value = []
		for (let i = -85; i < 85; i += 3.3) {
			list1.value.push({
				deg: i,
				list: 1
			})
		}
		for (let i = -78; i < 78; i += 6) {
			list2.value.push({
				deg: i,
				list: 2
			})
		}
		console.log(list1.value.length, list2.value.length)
		console.log(list1.value.length + list2.value.length)
		let _list = [...list1.value, ...list2.value]
		for (let i in _list) {
			InsertCard(_list[i], i)
		}
	}

	function InsertCard(e, i) {
		list.value.push({
			deg: -150,
			list: e.list,
			opacity: 0
		})
		let wait = setTimeout(() => {
			list.value[i].deg = e.deg
			list.value[i].opacity = 1
			clearTimeout(wait)
		}, i * 10)
	}

	let toastWait = null

	function showToast({
		title
	}) {
		clearTimeout(toastWait)
		toastWait = null
		toast.value = title
		toastWait = setTimeout(() => {
			toast.value = ''
			clearTimeout(toastWait)
			toastWait = null
		}, 1200)
	}

	let wait

	function Select(i) {
		if (wait) {
			showToast({
				title: '请等待上一张卡牌抽取完成',
				icon: 'none'
			})
			return
		}
		if (info.value.num == select.value.length) {
			showToast({
				title: `最多只能选择${info.value.num}张牌`,
				icon: 'none'
			})
			return
		}
		select.value.push({})
		let length = select.value.length
		if (length > 12) length -= 12
		if (info.value.num > 3) {
			list.value[i].style = {
				'--insert': `translate(${length * 20}rpx, ${210 + 60 + (select.value.length > 12 ? (90 * 1.65 + 20) : 0)}rpx)`,
				'z-index': select.value.length - 1
			}
		} else {
			list.value[i].style = {
				'--insert': `translate(${length * 20}rpx, ${210 + 60 + (select.value.length > 12 ? (90 * 1.65 + 20) : 0)}rpx)`,
				'z-index': select.value.length - 1
			}
		}
		list.value[i].class = ['select-move']
		wait = setTimeout(() => {
			clearTimeout(wait)
			wait = null
		}, 200)
	}

	function GetCards() {
		uni.request({
			url: config.baseUrl + '/app/getDeckInfoByid',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				id: options.id
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data
			} = resData
			info.value = data || {}
			// data.cardtype && data.cardtype.id && GetDeck(data.cardtype.id)
		})
	}

	function GetDeck(id) {
		console.log(id)
		uni.request({
			url: config.baseUrl + '/app/getCardtypeLoadDecklist',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				'cardtype.id': id
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data
			} = resData
		})
	}

	function Confirm() {
		if (!select.value.length) {
			showToast({
				title: '您没有选择任何的牌',
				icon: 'none'
			})
			return
		}

		if (select.value.length < info.value.num) {
			showToast({
				title: `还需${info.value.num - select.value.length}张牌`,
				icon: 'none'
			})
			return
		}

		uni.request({
			url: config.baseUrl + '/app/memberGenerateDrawCards',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				'member.id': uni.getStorageSync('user').id,
				'deck.id': options.id,
				dsts: options.dsts,
				ask: options.ask
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data
			} = resData
			if (options.emit) {
				uni.$emit(options.emit, data)
				let wait = setTimeout(() => {
					clearTimeout(wait)
					uni.navigateBack()
				}, 500)
			} else if (options.from) {
				uni.navigateTo({
					url: `/pages/test/cardDetailTools?id=${options.id}&tarotId=${data.id}&dsts=1&ask=${options.ask}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/test/testQuickCard2?id=${data.id}&dsts=1&ask=${options.ask}&bbsplateId=${options.bbsplateId}&posts=${options.posts}&year=${options.year}&zodiac=${options.zodiac}&gender=${options.gender}`
				})
			}
		})
	}
</script>

<style>
	page {
		background-image: none;
		background: #0b0841;
		--base: 90rpx;
		--card-rotate-radius: 420rpx;
	}

	.content {
		color: #fff;
		width: 100vh;
		height: 100vw;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: left top;
		position: relative;
	}

	/* .content {
		color: #fff;
		width: 100vw;
		height: 100vh;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: left top;
		position: relative;
	} */

	.status {
		width: var(--status);
	}

	.card-box {
		position: relative;
	}

	.result-box {
		width: 350rpx;
		border-left: 1px solid #d0d0d0;
	}

	.result-label-box {
		height: 210rpx;
		gap: 14rpx;
	}

	.result-label {
		font-size: 30rpx;
		line-height: 30rpx;
		color: #fff;
		align-self: center;
		padding: 10rpx 15rpx;
		background: #1ba8cb;
		border-radius: 10rpx;
	}

	.select-count {
		align-self: center;
		height: 60rpx;
		color: #fff;
		box-sizing: border-box;
		border: 1px solid #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
	}

	.select-count text {
		width: 50rpx;
		text-align: center;
		color: orange;
	}

	.card-outer {
		position: absolute;
		bottom: 120rpx;
		left: calc(50% - (var(--base) / 2));
		height: var(--card-rotate-radius);
		transform: rotate(var(--rotate));
		transform-origin: bottom center;
		transition: ease 20ms;
	}

	.card {
		width: var(--base);
		height: calc(var(--base) * 1.65);
	}

	@keyframes card-rotate {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(90deg);
		}
	}

	.card-rotate {
		animation: card-rotate 200ms ease;
		animation-fill-mode: forwards;
	}

	.card-outer-2 {
		--card-rotate-radius: 240rpx;
	}

	.select-box {
		height: calc(var(--base) * 1.65 * 2 + 20rpx * 3);
	}

	@keyframes select {
		0% {
			bottom: 120rpx;
			left: calc(50% - (var(--base) / 2));
			transform: rotate(var(--rotate));
		}

		100% {
			bottom: calc(100% - 20rpx - var(--card-rotate-radius));
			left: 100%;
			transform: rotate(0deg) var(--insert);
		}
	}

	.select-move {
		animation: select 200ms ease;
		animation-fill-mode: forwards;
		pointer-events: none;
	}

	.select-card {
		transform: rotateY(90deg);
	}

	@keyframes select-card-rotate {
		0% {
			transform: rotateY(90deg);
		}

		100% {
			transform: rotateY(0deg);
		}
	}

	.select-card-rotate {
		animation: select-card-rotate 200ms ease;
		animation-fill-mode: forwards;
	}

	.custom-toast {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 36rpx;
		background: rgba(0, 0, 0, .7);
		padding: 14rpx;
		border-radius: 12rpx;
	}

	.custom-button {
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		background: #1ba8cb;
	}
</style>